import React,{useEffect, useState,useContext} from "react";
import { connect} from "react-redux";
import PropTypes from "prop-types";
import FortuneImg from "./FortuneImg";
import FortuneIndex from "./FortuneIndex";
import MatchingContent from "./MatchingContent";
import {findConstellation,onFn,offFn} from "@/assets/utils/utils";
import {AppContext} from "./context/index"
import Ajax from "@/service/index";
import {set_men_name_action,set_women_name_action} from "@/store/actions";
function Matching(props){
    const CONSTLLATION=useContext(AppContext);
    const
        //  d=new Date(),
          [constName]=useState(CONSTLLATION),
        //   [menName,setMenName]=useState(findConstellation(d.getMonth()+1,d.getDate())),
        //   [womenName,setWomenName]=useState(findConstellation(d.getMonth()+1,d.getDate())),
          [showAllConstllation,setShowAllConstllation]=useState(0),//0 隐藏 1 显示女生 2 显示男生的
          [details,setSetails]=useState(null);
    const {menName,setMenName,womenName,setWomenName} =props
    const  hideShowFn=()=>{
        setShowAllConstllation(()=>0)
    }
    const stopPropagation=(event)=>{
        event.stopPropagation();
    }
    useEffect(()=>{
        onFn(document,"click",hideShowFn)
        return ()=>{
           offFn(document,"click",hideShowFn)
        }
    },[])
    useEffect(()=>{
        Ajax.xzpdQuery({men:menName.replace(/座/,""),women:womenName.replace(/座/,"")}).then(res=>{
            setSetails(res.result);
        })
    },[menName,womenName])
    return (
        <div className="fortune">
            <div className="flex">
                <div className="select flex-1">
                    <h3 className="women" onClick={(event)=>{stopPropagation(event);setShowAllConstllation(1)}}>{womenName}</h3>
                    <div className={["down_select",showAllConstllation==1?"show":""].join(" ")}>
                        <ul>
                            {
                                constName.map(item=>{
                                    return (<li key={item.name} onClick={(event)=>{stopPropagation(event);setShowAllConstllation(0);setWomenName(item.name)}}>{item.name}</li>)
                                })
                            }
                        </ul>
                    </div>
                </div>
                <div className="select flex-1" >
                    <h3 className="men" onClick={(event)=>{stopPropagation(event);setShowAllConstllation(2)}}>{menName}</h3>
                    <div className={["down_select",showAllConstllation==2?"show":""].join(" ")} >
                        <ul>
                            {
                                constName.map(item=>{
                                    return (<li key={item.name} onClick={(event)=>{stopPropagation(event);setShowAllConstllation(0);setMenName(item.name)}}>{item.name}</li>)
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <div className="tit">{womenName}</div>
            <FortuneImg name={womenName} />
            <div className="tit">{menName}</div>
            <FortuneImg name={menName} />
            
            {details&&<MatchingContent details={details} />}
        </div>
    )
}
/*
[menName,setMenName]=useState(findConstellation(d.getMonth()+1,d.getDate())),
          [womenName,setWomenName]=useState(findConstellation(d.getMonth()+1,d.getDate())),
*/
Matching.propTypes={
    menName:PropTypes.string.isRequired,
    menName:PropTypes.string.isRequired,
    setMenName:PropTypes.func.isRequired,
    setWomenName:PropTypes.func.isRequired,
}
function mapStateToProps(state){
    const {reducer_men_name,reducer_women_name}=state;
    return {
        menName:reducer_men_name,
        womenName:reducer_women_name
    }
}
 function mapDispatchToProps(dispatch){
    return {
        setMenName:text=>{dispatch(set_men_name_action(text))},
        setWomenName:text=>{dispatch(set_women_name_action(text))}
    }
 }

export default connect(mapStateToProps,mapDispatchToProps)(Matching)